<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        Hello from Facelets
        <h:form>
            <h:dataTable id="dt1" value="#{tableBean.getperInfoAll()}" 
                         var="item" bgcolor="#F1F1F1" border="10" 
                         cellpadding="5" cellspacing="3" first="0" 
                         rows="6" width="50%" dir="LTR" frame="hsides" 
                         rules="all" summary="This is a JSF code to create dataTable."
                         styleClass="order-table"
                         headerClass="order-table-header"
                         rowClasses="order-table-odd-row,order-table-even-row"
                         >

                <f:facet name="header">
                    <h:outputText value="This is 'dataTable' demo" />
                </f:facet>

                <h:column>
                    <f:facet name="header">
                        <h:commandLink action="#{tableBean.sortById()}" value="Id" style="text-decoration: none;"></h:commandLink>
                    </f:facet>
                    <h:outputText value="#{item.id}"></h:outputText>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:commandLink action="#{tableBean.sortByName()}" value="Name" style="text-decoration: none;"></h:commandLink>
                    </f:facet>
                    <h:outputText value="#{item.name}"></h:outputText>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="phone"/>
                    </f:facet>
                    <h:outputText value="#{item.phone}"></h:outputText>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="city"/>
                    </f:facet>
                    <h:outputText value="#{item.city}"></h:outputText>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="pin"/>
                    </f:facet>
                    <h:outputText value="#{item.pin}"></h:outputText>
                </h:column>

                <f:facet name="footer">
                    <h:outputText value="The End" />
                </f:facet>

            </h:dataTable>
        </h:form>
    </h:body>
</html>

